<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition 
	template="/template/template-padrao.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	
	<ui:define name="titulo">Principal</ui:define>	
	
	<ui:define name="corpo">
		
		<!-- JavaScript slide -->
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/slide/rhinoslider-1.05.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/slide/rhinoslider-1.05.min.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/slide/mousewheel.js"></script>
		
		<script type="text/javascript">
			
			$(document).ready(function() {
				$('#slider').rhinoslider({
					effect: 'fade'
				});
			});
			
		</script>
		
		<!-- CSS slide -->
		<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/css/slide/rhinoslider-1.05.css"/>
		
		<style>
		
		#slider {
				 width:1165px;
				 height:400px;
				
				 /*IE bugfix*/
				 padding:0;
				 margin:0;
			}
			
			#slider li { list-style:none; }
			
			#page {
				width:600px;
				margin:50px auto;
			}
	
		</style>
		
		<!-- Slide -->
		<div class="container">
			<div id="page" class="span12">
				<ul id="slider" class="sombra ui-corner-all">
					<li><img src="#{facesContext.externalContext.requestContextPath}/img/slide/slider/04.jpg" alt="" class="ui-corner-all"/></li>
					<li><img src="#{facesContext.externalContext.requestContextPath}/img/slide/slider/02.jpg" alt="" class="ui-corner-all"/></li>
					<li><img src="#{facesContext.externalContext.requestContextPath}/img/slide/slider/01.jpg" alt="" class="ui-corner-all"/></li>
					<li><img src="#{facesContext.externalContext.requestContextPath}/img/slide/slider/03.jpg" alt="" class="ui-corner-all"/></li>
				</ul>
			</div>
		</div>
	
		<div class="container" align="center">
			
			<div class="row-fluid " >
		        <div class="span4">
		       		<h2>O que é</h2>
				          
					<p>
						A cada quilo perdido, faremos a reversão em alimentos para doações a uma instituições de caridade.
					</p>
				   
					<a 
						class="btn btn-large btn-danger btn-large sombra" 
						data-reveal-id="modalManutencao" 
						href="#">
						<i class="icon-plus icon-white"></i> Detalhes
					</a>
				        	
					<div id="modalManutencao" class="reveal-modal large ">
						<h1>O que é</h1>
						
						<p align="left">
							 O projeto Foca na Dieta tem como objetivo juntar o maior número de pessoas possíveis que querem levar uma vida saudável
							 através de um acompanhamento nutricional, com preparadores físicos e atividades realizadas semanalmente.
						</p>
						
						<p align="left">
						 	Queremos fazer	 diferença na vida das pessoas carentes começando essa mudança em nossas próprias vidas.
						</p>
						<a class="close-reveal-modal">&#215;</a>
					</div>
				</div>
	
				<div class="span4">
					<h2>Como participar</h2>
				
					<p>
						Você poderá fazer o cadastro no site e acompanhar o projeto pelas redes sociais.
					</p>
				          
					<p>
						<a 
							class="btn btn-danger btn-large sombra" 
							data-reveal-id="modalSuporte" 
							href="#">
							<i class="icon-plus icon-white"></i> Detalhes
						</a>
					</p>
				          
					<div id="modalSuporte" class="reveal-modal">
						<h1>Como participar</h1>
						
						<p align="left">
							Faça seu cadastro e tenha dicas diárias de alimentação, saúde, bem estar e também nossa agenda de encontros e eventos.
						</p> 
						
						<br/>
						
						<div align="center">
							<a 
								class="btn btn-danger sombra btn-large"
								href="#{facesContext.externalContext.requestContextPath}/paginas/site/cadastro.faces">Cadastrar
							</a>
						</div>
						
						<a class="close-reveal-modal">&#215;</a>
					</div>
				</div>
				<div class="span4">
					<h2>Como surgiu</h2>
				
					<p>
						Esse projeto nasceu do desejo conjunto de cuidar da saúde e também ajudar quem precisa.
					</p>
					<p>
						<a 
							class="btn btn-danger btn-large sombra" 
							data-reveal-id="modalConsultoria" 
							href="#">
							<i class="icon-plus icon-white"></i> Detalhes
						</a>
					</p>
				
					<div id="modalConsultoria" class="reveal-modal">
						<h1>Como surgiu</h1>
						<p align="left"> 
							Foca na dieta nasceu do desejo conjunto de cuidar da saúde e também ajudar quem precisa, afinal enquanto a metade do mundo quer emagrecer (como nós) a outra metade passa fome.
							Nossa intenção é influenciar hábitos saudáveis e ajudar o maior número de pessoas possíveis a adiquirirem tais hábitos.
						</p>
						<p align="left">
							Desejamos que todo processo de emagrecimento seja visto como prazeroso e não oneroso. Uma rotina onde a atividade física e a boa alimentação sejam incorporadas
							definitivamente ao nosso dia a dia, e que isso deixe de ser um sacrifício para a maioria das pessoas.
						</p>
						<a class="close-reveal-modal">&#215;</a>
					</div>
				</div>
			</div>
		</div><br/><br/>
	</ui:define>
</ui:composition>